import React from 'react';
import Button, { ButtonType, ButtonSize } from './components/Button/button'

import Menu from './components/Menu/menu'
import MenuItem from './components/Menu/menuItem'
import Submenu from './components/Menu/subMenu'


import Hello from './components/Hello'
import LikeButton from './components/LikeButton'
import MouseTracker from './components/mouseTracker'
import useMousePosition from './hooks/useMousePosition'


const App: React.FC = () => {
  const positions = useMousePosition()
  return (
    <div className="App">

      <Menu defaultIndex={0} mode="horizontal">

        <MenuItem>
          link1
        </MenuItem>
        <MenuItem disabled>
          link2
        </MenuItem>

        <Submenu title="dropdown">
          <MenuItem>
            dropdown1
          </MenuItem>
          <MenuItem>
            dropdown2
          </MenuItem>
          <MenuItem>
            dropdown3
          </MenuItem>
        </Submenu>

        <MenuItem>
          link3
        </MenuItem>

      </Menu>


      <Button onClick={(e) => { e.preventDefault(); alert(123) }}>h</Button>
      <Button>h</Button>
      <Button>h</Button>
      <Button disabled>h</Button>
      <Button btnType={ButtonType.Primary} size={ButtonSize.Large}>h</Button>
      <Button btnType={ButtonType.Danger} size={ButtonSize.Large}>h</Button>
      <Button btnType={ButtonType.Link} href="www.baidu.com">h</Button>


      <Hello message="" />
      <LikeButton></LikeButton>
      <p>X:{positions.x}, Y:{positions.y}</p>
    </div>
  );
}

export default App;
